Feliz Navidad 2012

DESCARGA

En Snook nos explican la forma de utilizar un contenedor y que al pasar el ratón nos muestre un contenido extra. El ejemplo del autor puede verse aquí.
Y añadiendo una imagen tal como sugiere el resultado sería el que vemos a continuación: 

Here's what you have.

Here's more of a description of what we have going on here.

Para hacerlo utilizamos CSS. Nos situamos antes de ]]></b:skin> y añadimos lo siguiente:

.infobox {
    position:relative;
    border:1px solid #000; 
    background-color:#CCC;
    width:73px;
    padding:5px;
    }
.infobox img {
 position:relative;
 z-index:2;
    }
.infobox .more {
 display:none;
    }
.infobox:hover .more {
 display:block;
    position:absolute;
    z-index:1;
    left:-1px;
    top:-1px;
    width:73px;
    padding:78px 5px 5px;
    border:1px solid #900;
    background-color:#FFEFEF;
    }

Guardamos los cambios y en un gadget de HTML añadimos los siguiente:

<div class="infobox">
   <img src="Url-de-la-imagen">
   <div>Here's what you have.</div>
 <div class="more">Texto oculto</div>
</div> 

Retocando un poco el CSS podemos hacer lo mismo y que resulte algo más vistoso.

Bienvenidos a este blog!

Autodidacta por vocación y apasionada del diseño y todo lo relacionado con Blogger.
Colaboradora en www.reinventaweb.com

De igual forma nos situaríamos antes de ]]></b:skin> y añadimos los estilos:

<style type="text/css">
    .infobox {
    background-color: #FFFFFF;
    padding: 0;
    position: relative;
    width: 100px;
}
.infobox h2 {
    color: #000000;
    font-size: 11px;
    letter-spacing: 1px;
    margin: 10px 0 0 20px !important;
    padding: 0 0 0 10px !important;
    text-align: left;
    text-shadow: 1px 1px 0 #CCCCCC;
    text-transform: none;
}
.infobox img {
    border: 3px solid #FFFFFF;
    border-radius: 100px 100px 100px 100px;
    box-shadow: 1px 1px 1px #333333;
    float: left;
    margin: 10px 25px 5px 10px;
    opacity: 0.9;
    position: relative;
    width: 95px;
    z-index: 2;
}
.infobox .more {
    display: none;
}
.infobox:hover .more {
    background-color: #BF7195;
    border: 3px double #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    color: #FFFFFF;
    display: block;
    left: 0;
    padding: 15px 10px 10px 120px;
    position: absolute;
    top: -10px;
    width: 200px;
    z-index: 1;
    height: 135px;
}
.infobox:hover a {
  text-shadow: none;
    color: #000000;
}
</style>

<div class="more">
<span style="color: white; font-family: Arial, Verdana,Tahoma,; font-size: 12px; text-shadow: 1px 1px 1px #000000;">Contenido oculto<br> Texto en negrita </span><a target="_blank" href="Url-del-enlace">Texto enlace</a></div>
</div>

Los cambios a realizar está detallados en el HTML, en "Contenido oculto" lo sustituimos por el contenido que deseamos mostrar. "Texto en negrita" es el texto final y si no lo deseamos simplemente eliminamos la línea de texto.

Y por último donde "Url-del-enlace" y "Texto-enlace" lo sustituimos también por el nuestro o simplemente eliminamos esa linea pero respetando los dos cierres finales de la etiqueta </div>